<template>
  <div class="forumInfo">
    <headers></headers>
    <div class="article-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-area">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/forum' }">资讯论坛</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      
      <!-- 文章内容卡片 -->
      <el-card class="article-card" v-loading="loading" shadow="hover">
        <template v-if="!loading && info.title">
          <!-- 文章头部信息 -->
          <div class="article-header">
            <h1 class="article-title">{{ info.title }}</h1>
            
            <div class="article-meta">
              <div class="meta-item">
                <i class="el-icon-user-solid"></i>
                <span>{{ info.author || '游客投稿' }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-date"></i>
                <span>{{ formatDate(info.createTime) }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-view"></i>
                <span>{{ info.views || randomViews() }} 阅读</span>
              </div>
            </div>
            
            <!-- 文章标签 -->
            <div class="article-tags" v-if="info.tags || generateTags()">
              <el-tag 
                v-for="(tag, index) in info.tags || generateTags()" 
                :key="index"
                :type="getTagType(index)"
                effect="plain"
                size="small"
              >{{ tag }}</el-tag>
            </div>
          </div>
          
          <!-- 文章摘要 -->
          <div class="article-summary" v-if="info.summary">
            <div class="summary-content">
              {{ info.summary }}
            </div>
          </div>
          
          <!-- 分隔线 -->
          <el-divider><i class="el-icon-document"></i></el-divider>
          
          <!-- 文章内容 -->
          <div class="article-content" v-html="info.content"></div>
          
          <!-- 文章底部 -->
          <div class="article-footer">
            <div class="article-share">
              <span class="share-label">分享到：</span>
              <div class="share-buttons">
                <el-button type="primary" icon="el-icon-share" circle size="small" @click="shareToWeixin"></el-button>
                <el-button type="danger" icon="el-icon-star-off" circle size="small" @click="shareToWeibo"></el-button>
                <el-button type="info" icon="el-icon-message" circle size="small" @click="shareToQQ"></el-button>
                <el-button icon="el-icon-link" circle size="small" @click="copyLink"></el-button>
              </div>
            </div>
            
            <div class="article-actions">
              <el-button type="primary" plain icon="el-icon-thumb" @click="likeArticle">
                <span>点赞</span>
                <span class="like-count">{{ likeCount }}</span>
              </el-button>
              <el-button type="info" plain icon="el-icon-back" @click="goBack">返回列表</el-button>
            </div>
          </div>
        </template>
        
        <!-- 文章为空的情况 -->
        <el-empty 
          v-if="!loading && !info.title" 
          description="文章不存在或已被删除"
        >
          <el-button type="primary" @click="goBack">返回列表</el-button>
        </el-empty>
      </el-card>
      
      <!-- 相关推荐 -->
      <div class="related-articles" v-if="!loading && info.title">
        <h3 class="section-title">
          <i class="el-icon-reading"></i>
          相关推荐
        </h3>
        
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in relatedArticles" :key="index">
            <el-card 
              shadow="hover" 
              class="related-article-card"
              @click.native="viewRelatedArticle(item.id)"
            >
              <div class="related-article-title">{{ item.title }}</div>
              <div class="related-article-info">
                <span><i class="el-icon-date"></i> {{ item.date }}</span>
                <span><i class="el-icon-view"></i> {{ item.views }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <!-- 返回顶部按钮 -->
    <el-backtop :visibility-height="200">
      <div class="back-to-top">
        <i class="el-icon-top"></i>
      </div>
    </el-backtop>
    
    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysForumById } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  data() {
    return {
      id: "",
      info: {},
      loading: true,
      likeCount: 0,
      // 模拟相关文章数据
      relatedArticles: []
    }
  },
  components: {
    headers,
    bottoms
  },
  methods: {
    getSysForumById() {
      this.loading = true;
      getSysForumById({ id: this.id }).then(res => {
        if (res.code == 1000) {
          this.info = res.data;
          // 生成随机点赞数
          this.likeCount = Math.floor(Math.random() * 200) + 10;
          // 生成模拟的相关文章
          this.generateRelatedArticles();
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) {
        const date = new Date();
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      }
      
      // 简单返回原始日期字符串，如果需要，可以添加日期格式化逻辑
      return dateStr;
    },
    
    // 生成随机阅读量
    randomViews() {
      return Math.floor(Math.random() * 5000) + 500;
    },
    
    // 生成随机标签
    generateTags() {
      const allTags = ['旅游攻略', '景点介绍', '游客体验', '美食推荐', '住宿推荐', '交通指南', '活动公告'];
      const randomCount = Math.floor(Math.random() * 3) + 1;
      const shuffled = [...allTags].sort(() => 0.5 - Math.random());
      return shuffled.slice(0, randomCount);
    },
    
    // 获取标签类型
    getTagType(index) {
      const types = ['', 'success', 'info', 'warning', 'danger'];
      return types[index % types.length];
    },
    
    // 点赞文章
    likeArticle() {
      this.likeCount++;
      this.$message({
        message: '点赞成功，感谢您的支持！',
        type: 'success'
      });
    },
    
    // 返回列表
    goBack() {
      this.$router.push('/forum');
    },
    
    // 分享功能（模拟实现）
    shareToWeixin() {
      this.$message({
        message: '已复制链接，请打开微信分享',
        type: 'success'
      });
    },
    
    shareToWeibo() {
      this.$message({
        message: '已打开微博分享窗口',
        type: 'success'
      });
    },
    
    shareToQQ() {
      this.$message({
        message: '已打开QQ分享窗口',
        type: 'success'
      });
    },
    
    copyLink() {
      // 实际应用中应使用clipboard API复制链接
      this.$message({
        message: '链接已复制到剪贴板',
        type: 'success'
      });
    },
    
    // 生成模拟的相关文章
    generateRelatedArticles() {
      const titles = [
        '周边最值得一去的十大景点推荐',
        '本地美食攻略：不可错过的特色小吃',
        '三天两夜行程规划，玩转全城',
        '最受欢迎的五家特色民宿推荐',
        '交通指南：如何便捷抵达各大景点',
        '淡季出行攻略：人少景美省钱之选'
      ];
      
      this.relatedArticles = [];
      
      for (let i = 0; i < 3; i++) {
        this.relatedArticles.push({
          id: Math.floor(Math.random() * 1000) + 1,
          title: titles[Math.floor(Math.random() * titles.length)],
          date: this.formatDate(),
          views: Math.floor(Math.random() * 2000) + 300
        });
      }
    },
    
    // 查看相关文章
    viewRelatedArticle(id) {
      // 实际环境中应跳转到真实文章
      this.$router.push({
        path: '/forumInfo',
        query: { id: id }
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getSysForumById();
    
    // 滚动到页面顶部
    window.scrollTo(0, 0);
  }
}
</script>

<style scoped>
/* 整体容器 */
.forumInfo {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.article-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* 面包屑区域 */
.breadcrumb-area {
  margin-bottom: 20px;
  padding: 10px 0;
}

/* 文章卡片 */
.article-card {
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* 文章标题区域 */
.article-header {
  margin-bottom: 25px;
}

.article-title {
  font-size: 26px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
  color: #909399;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item i {
  margin-right: 5px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

/* 文章摘要 */
.article-summary {
  background-color: #f8f9fa;
  border-left: 4px solid #409EFF;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
}

.summary-content {
  color: #606266;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

/* 文章内容 */
.article-content {
  color: #303133;
  line-height: 1.8;
  font-size: 16px;
  padding: 10px 0;
}

/* 文章底部 */
.article-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.share-label {
  color: #606266;
  font-size: 14px;
}

.share-buttons {
  display: flex;
  gap: 10px;
}

.article-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.like-count {
  margin-left: 5px;
  font-weight: bold;
}

/* 相关文章 */
.related-articles {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  color: #409EFF;
}

.related-article-card {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.related-article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.related-article-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 10px;
  line-height: 1.4;
  /* 多行文本截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-article-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #909399;
}

/* 返回顶部按钮 */
.back-to-top {
  background-color: #409EFF;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* 深度选择器保证图片适应容器宽度 */
::v-deep img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px;
  margin: 10px 0;
}

/* 增强文章内容排版 */
::v-deep p {
  margin: 16px 0;
  line-height: 1.8;
}

::v-deep h1, ::v-deep h2, ::v-deep h3, ::v-deep h4, ::v-deep h5, ::v-deep h6 {
  margin-top: 28px;
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
}

::v-deep a {
  color: #409EFF;
  text-decoration: none;
}

::v-deep a:hover {
  text-decoration: underline;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .article-container {
    padding: 15px;
  }
  
  .article-title {
    font-size: 22px;
  }
  
  .article-meta {
    flex-direction: column;
    gap: 10px;
  }
  
  .article-actions {
    flex-direction: column;
  }
  
  .article-actions .el-button {
    width: 100%;
  }
}
</style>